<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线尝试 Bootstrap 实例</title>
    <meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">

    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>

<div>通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。</div>
<div class="table-responsive">

<table class="table">
    <caption>基本的表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
    </tr>
    </tbody>
</table>

</div>


</body>
</html>